<template>
  <li class="film-item">
    <a :href="'/film/' + props.film.filmId" class="film-wrap">
      <div class="lazy-img film-img">
        <div class="lazy-img-wrap">
          <img :src="props.film.poster" class="target-img" />
        </div>
      </div>
      <div class="film-info">
        <!-- float: left -->
        <div class="film-name info-col">
          <span class="name">{{ props.film.name }}</span><span class="item">{{ props.film.filmType.name }}</span>
        </div>
        <div class="film-name-grade info-col">
          <span class="label">观众评分 </span><span class="grade">{{ grade }}</span>
        </div>
        <div class="film-actors info-col">
          <span class="label">主演：{{ actorList }}</span>
        </div>
        <div class="film-detail info-col">
          <span class="label">{{ props.film.nation }} | {{ props.film.runtime }}</span>
        </div>
      </div>
      <div class="film-buy">购票</div>
      <!-- float: right  -->
    </a>

  </li>
</template>

<script setup>
import { computed } from 'vue'
// import { useStore } from '@/stores/index.js'
// const store = useStore()
const props = defineProps({
  film: {
    type: Object,
  },
});


//console.log("props.film.actors:", props.film.actors)
const grade = computed(() => {
  if (!props.film.grade) {
    return '暂无评分'
  } else {
    return props.film.grade
  }
})
const actorList = computed(() => {
  if (!props.film.actors || !Array.isArray(props.film.actors)) {
    return '暂缺'; // 如果 actors 不存在或不是数组，返回空字符串
  }
  const list = props.film.actors.map((actor) => {
    return actor.name
  });
  return list.join(' ')
});
//console.log("Received film:", props.film);

</script>

<style scoped>
.film-item {
  padding: 15px 15px 15px 0;
  /* height: 94px; */
  position: relative;
}


.film-item:after {
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 1px;
  border-bottom: 1px solid #ededed;
  color: #ededed;
  transform-origin: 0 100%;
  transform: scaleY(.5);

}



.film-item .film-wrap {

  display: flex;

  justify-content: space-between;
  ;

  align-items: center;
  color: #333;
  text-decoration: none;
}



.lazy-img.film-img {

  position: relative;
  width: 100px;
  height: 140px;
  float: left;
}

.lazy-img-wrap {
  width: 100%;
  height: 100%;
  background: rgb(249, 249, 249);
  opacity: 1;
  border-radius: 2px;
  display: block;
  position: absolute;
  overflow: hidden;
  top: 0;

}

img.target-img {
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 2px;

}


.film-info {
  float: left;
  width: calc(100% - 116px);
  padding: 0 10px;
  vertical-align: middle;


}



.info-col .name {
  max-width: calc(100% - 25px);
  color: #191a1b;
  font-size: 16px;
  height: 22px;
  line-height: 22px;
  margin-right: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.info-col .item {
  font-size: 9px;
  color: #fff;
  background-color: #d2d6dc;
  height: 14px;
  line-height: 14px;
  padding: 0 2px;
  border-radius: 2px
}


.grade {
  color: #ffb232;
  font-size: 14px;
}

.info-col .label {
  font-size: 13px;
  margin-top: 4px;
  color: #797d82;
}

.film-buy {
  line-height: 25px;
  height: 25px;
  width: 50px;
  color: var(--van-primary-color);
  ;
  font-size: 14px;
  text-align: center;
  border-radius: 2px;
  position: relative;
  float: right;
}

.film-buy:after {
  content: " ";
  transform: scale(.5);
  position: absolute;
  border: 1px solid var(--van-primary-color);
  top: -50%;
  right: -50%;
  bottom: -50%;
  left: -50%;
  border-radius: 4px;
}
</style>
